<template>
  <view>
    <Header type="back" title="个人资料" />

    <view class="w-100" :class="'h' + bar_h"></view>
    <view
      class="bg-f8ff w-100 ab left0 bottom0 rounded-120-bottom ov-hd-y"
      :class="'top' + bar_h"
    >
      <view class="w-100 px-4" v-if="is_edit == 'show'">
        <view class="w-100 py-5 fc-a-c">
          <ImageFile
            :url="userInfo.avatar"
            className="w198 h198 rounded-circle"
          />
          <!-- <image :src="userInfo.avatar" class="w198 h198 rounded-circle"/> -->
        </view>

        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">昵称</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{
              userInfo.name || "暂无"
            }}</view>
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">手机号</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{ userInfo.phone }}</view>
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c" v-if="user_baby_info.name">
          <view class="font30 t-8">宝宝姓名</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{ user_baby_info.name }}</view>
          </view>
        </view>
        <view
          class="w-100 h116 border-bottom f-b-c"
          v-if="user_baby_info.age || user_baby_info.age == 0"
        >
          <view class="font30 t-8">宝宝年龄</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{ user_baby_info.age }}岁</view>
          </view>
        </view>
        <view
          class="w-100 h116 border-bottom f-b-c"
          v-if="user_baby_info.sex || user_baby_info.age == 0"
        >
          <view class="font30 t-8">宝宝性别</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{
              sex_type[user_baby_info.sex]
            }}</view>
          </view>
        </view>
        <view
          class="w-100 h116 border-bottom f-b-c"
          v-if="user_baby_info.birthday"
        >
          <view class="font30 t-8">宝宝生日</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{
              user_baby_info.birthday
            }}</view>
          </view>
        </view>
        <view
          class="w-100 h116 border-bottom f-b-c"
          v-if="user_baby_info.interest"
        >
          <view class="font30 t-8">宝宝兴趣</view>
          <view class="f-a-c">
            <view class="font30 t-20 font600">{{
              user_baby_info.interest
            }}</view>
          </view>
        </view>

        <view class="w-100 h100 f-c-c pt-10">
          <view
            class="px-2-6 h90 bg-theme font32 mr-4 t-20 font600 f-c-c circle14"
            @click="set_is_edit('user')"
            >修改信息</view
          >
          <!-- <view class="px-2-6 h90 bg-theme font32 t-20 font600 f-c-c circle14" @click="set_is_edit('baby')">添加宝宝</view> -->
        </view>

        <!-- 	<view class="w-100 h116 border-bottom f-b-c">
					<view class="font30 t-8">添加宝宝</view>
					<view class="f-a-c">
						<view class="font30 t-20 font600">画画</view>
						<image src="../../../static/icon_right_0.png" class="w24 h24 ml-2" /></image>
					</view>
				</view> -->
        <!-- <view class="w-100 h220"></view> -->
      </view>

      <view class="w-100 px-4" v-if="is_edit == 'user'">
        <view class="w-100 py-5 fc-a-c">
          <ImageFile
            :url="user_info.avatar"
            className="w198 h198 rounded-circle"
          />
          <view class="w-100 font28 t-8 pt-2 f-c-c" @click="set_image"
            >点击更换头像</view
          >
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">昵称</view>
          <view class="f-a-c w480">
            <input
              v-model="user_info.name"
              class="uni-input border h80 font28 px-2 w480"
              placeholder="请输入昵称"
            />
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">手机号</view>
          <view class="f-a-c w480">
            <input
              v-model="user_info.phone"
              class="uni-input border h80 font28 px-2 w480"
              placeholder="请输入手机号"
            />
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">性别</view>
          <view class="f-a-c">
            <radio-group @change="radioChange" v-model="user_info.sex">
              <label
                class="mr-2 uni-list-cell uni-list-cell-pd"
                v-for="(item, index) in sex_list"
                :key="item.label"
              >
                <radio
                  :value="item.label"
                  :checked="item.label == user_info.sex"
                />{{ item.value }}
              </label>
            </radio-group>
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">生日</view>
          <view class="f-a-c w480" @click="openDatetimePicker()">
            <view class="uni-input f-y-c border h80 font28 px-2 w480">{{
              user_info.birthday || "请选择生日"
            }}</view>
          </view>
        </view>
        <view class="w-100 h100 f-c-c pt-10">
          <view
            class="px-2-6 h90 bg-theme mr-4 font32 t-20 font600 f-c-c circle14"
            @click="set_back()"
            >返 回</view
          >
          <view
            class="px-2-6 h90 bg-theme font32 t-20 font600 f-c-c circle14"
            @click="set_submit_user()"
            >保 存</view
          >
        </view>
      </view>

      <view class="w-100 px-4" v-if="is_edit == 'baby'">
        <view class="w-100 h100"></view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">宝宝姓名</view>
          <view class="f-a-c">
            <input
              v-model="user_baby.name"
              class="uni-input border h80 font28 px-2 w476"
              placeholder="请输入宝宝姓名"
            />
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">宝宝兴趣</view>
          <view class="f-a-c">
            <input
              v-model="user_baby.interest"
              class="uni-input border h80 font28 px-2 w476"
              placeholder="请输入宝宝兴趣"
            />
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">宝宝性别</view>
          <view class="f-a-c">
            <radio-group @change="radioChange" v-model="user_baby.sex">
              <label
                class="mr-2 uni-list-cell uni-list-cell-pd"
                v-for="(item, index) in sex_list"
                :key="item.label"
              >
                <radio
                  :value="item.label"
                  :checked="item.label == user_baby.sex"
                />{{ item.value }}
              </label>
            </radio-group>
          </view>
        </view>
        <view class="w-100 h116 border-bottom f-b-c">
          <view class="font30 t-8">宝宝生日</view>
          <view class="f-a-c" @click="openDatetimePicker()">
            <view class="uni-input f-s-c border h80 font28 px-2 w476">{{
              user_baby.birthday || "请选择生日"
            }}</view>
          </view>
        </view>
        <view class="w-100 h100 f-c-c pt-10">
          <view
            class="px-2-6 h90 bg-theme mr-4 font32 t-20 font600 f-c-c circle14"
            @click="set_back()"
            >返 回</view
          >
          <view
            class="px-2-6 h90 bg-theme font32 t-20 font600 f-c-c circle14"
            @click="set_submit_baby()"
            >保 存</view
          >
        </view>
      </view>

      <view class="w-100 h200"></view>
    </view>

    <SimpleDateTimePicker
      ref="myPicker_info_in"
      @submit="handleSubmit"
      :start-year="1974"
      :end-year="2050"
    />
  </view>
</template>

<script>
import {
  uploadImage,
  memberEdit,
  addBaby,
  editBaby,
  get_member_info,
} from "../../../api/user.js";
import Header from "../../../components/header.vue";
import ImageFile from "../../../components/img_file.vue";
import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
export default {
  components: {
    SimpleDateTimePicker,
    ImageFile,
    Header,
  },
  data() {
    return {
      bar_h: 0,
      userInfo: {},
      is_edit: "show",
      user_info: {},
      user_baby_info: {},
      user_baby: {},
      file: "",
      sex_type: {
        0: "保密",
        1: "男",
        2: "女",
      },
      sex_list: [
        {
          label: "1",
          value: "男",
        },
        {
          label: "2",
          value: "女",
        },
        {
          label: "0",
          value: "保密",
        },
      ], //别 1男2女0未知
    };
  },
  created() {
    this.userInfo = uni.getStorageSync("userInfo") || {};

    this.file = uni.getStorageSync("file") || "";

    this.get_uer_info_in();

    const { statusBarHeight } = uni.getStorageSync("systemInfo");
    this.bar_h = 100 + statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度  +  预留背景高度 整个背景高度
  },
  methods: {
    get_uer_info_in() {
      let data = {
        id: this.userInfo.id,
        queryBaby: true,
      };
      get_member_info(data).then((res) => {
        if (res.code == 0) {
          if (res.body.babyList && res.body.babyList.length) {
            this.user_baby_info = { ...res.body.babyList[0] };
          }
        }
      });
    },
    openDatetimePicker() {
      this.$refs.myPicker_info_in.show();
    },
    // 关闭picker
    closeDatetimePicker() {
      this.$refs.myPicker_info_in.hide();
    },
    radioChange(evt) {
      let obj =
        this.sex_list.find((item) => item.label == evt.detail.value) || {};
      this.user_baby.sex = obj.label;
      this.user_info.sex = obj.label;
    },
    handleSubmit(e) {
      console.log(e);
      let birthday = `${e.year}-${e.month}-${e.day}`;
      this.$nextTick(() => {
        this.user_info.birthday = birthday;
        this.user_baby.birthday = birthday;
      });
      this.$forceUpdate();
    },
    set_is_edit(val) {
      this.is_edit = val;
      this.user_info = { ...this.userInfo };
      this.user_baby = { ...this.user_baby_info };
      this.user_baby.memberId = this.user_info.id;
    },
    set_back() {
      this.is_edit = "show";
    },
    set_submit_baby() {
      let query = this.user_baby.id ? editBaby : addBaby;
      query(this.user_baby).then((res) => {
        if (res.code == 0) {
          this.get_uer_info_in();
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
          this.is_edit = "show";
        }
      });
    },
    set_submit_user() {
      let { name, birthday, avatar, id, phone, sex } = this.user_info;
      let data = {
        name,
        phone,
        birthday,
        avatar,
        memberId: id,
        sex,
      };
      memberEdit(data).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "保存成功",
            icon: "none",
          });
          let user_info = uni.getStorageSync("userInfo") || {};

          user_info = { ...user_info, ...this.user_info };

          uni.setStorageSync("userInfo", user_info);

          this.userInfo = user_info;

          this.$forceUpdate();

          this.is_edit = "show";
          uni.$emit("updateUserInfo");
        }
      });
    },
    set_image() {
      console.log(1111);
      uni.chooseMedia({
        count: 1,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        camera: "back",
        success(res) {
          console.log(JSON.stringify(res.tempFilePaths));
          this.set_up_image(res.tempFilePaths[0]);
        },
        fail(error) {
          console.log(error);
        },
      });
      // uni.chooseMedia({
      //   count: 1, //默认9
      //   sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
      //   sourceType: ["album"], //从相册选择
      //   success: (res) => {
      //     console.log(JSON.stringify(res.tempFilePaths));
      //     this.set_up_image(res.tempFilePaths[0]);
      //   },
      // });
    },
    set_up_image(val) {
      let host = uni.getStorageSync("host");

      const frist_token = uni.getStorageSync("token") || "";
      const { token } = uni.getStorageSync("userInfo") || {};

      uni.uploadFile({
        url: host + "/api/v1/file/uploadImage/mobile", //仅为示例，非真实的接口地址
        filePath: val,
        name: "file",
        header: {
          Authorization: frist_token || token,
        },
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data);
          let body = JSON.parse(uploadFileRes.data);
          this.user_info.avatar = body.body;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-120-bottom {
  border-radius: 0 80rpx 0 0;
}
</style>
